<style lang="scss" scoped>
    @import '../../css/study-plan.scss';
    .head-tab-box{padding: 18px 20px;background: #fff;margin-bottom: 8px;}
    .head-tab-box span{margin-right: 30px;cursor: pointer;font-size: 14px;}
    .head-tab-checked{color: $mco;border-bottom: 3px solid $mco;}
    .main-content{padding: 0 100px 50px 30px;background: #fff;}
    .paper-title{font-size: 16px;font-weight: bold;padding: 30px 0 0 0;}
    .question-title{padding: 34px 0 0 0;}
    .question-item{padding: 16px 0 16px 24px;}
    .question-item>span{float: left;}
    .question-item>p{padding-left: 30px;}
    .per-box{padding: 0 0 0 24px;}
    .per-box>div{width: 94%;float: left;margin-top: 4px;}
    .per-box>span{text-align: right;width: 6%;float: left;}
    .q3-box{border:1px solid #eee;margin: 24px 0 0 24px;}
    .q3-head{padding: 18px 0;background: #fcfdff;border-bottom: 1px solid #eee;}
    .q3-name{display: inline-block;width: 12%;text-align: center;}
    .q3-body{padding: 18px 0;}
    .q3-body>span{display: inline-block;text-align: center;width: 12%;vertical-align: middle;}
    .q3-body>p{display: inline-block;width: 86%;vertical-align: middle;}

    .paper-info-main{padding: 26px 40px 80px;min-height:600px;background: #fff;}
    .info-head{font-size: 18px;font-weight: bold;padding-bottom: 16px;}
    .info-main-content{text-align: center;border: 1px solid #eee;}
    .info-main-title{padding: 18px 0;background: #fcfdff;border-bottom: 1px solid #eee;}
    .info-main{padding: 18px 0}
    .student-input-box{float: right;}

    .detail-stu-info{}
    .detail-stu-info span{width: 32%;text-align: left;color:$mc2;display: inline-block;}

    .detail-stu-score{color:$mc2;}
    .stu-test-status{color:$mco;}
    .detail-stu-title{height: 20px;}
    .exam-space-linet{position: absolute;top:0;left: 0;z-index:2;background: #fff;padding-right: 10px;}
    .exam-space-line{height: 1px;background: $mc3;position: absolute;top:12px;width: 100%;z-index:1;}

    .answers-score{top: 0px;right: 20px;color:$mc3;}
    .question-topic{color:$mc2;}
    .question-down{padding: 20px 20px 20px 16px;background: $mcb;}
    .question-down-left{color: #ff9c5a;}
    .question-down-right{color:$mco;}
    .question-options{padding-left: 16px;color:$mc2;background: #fff;}

    .question-options-box{color: $mc2;}
    .question-options2{border-collapse:collapse;width: 100%;padding-left: 30px;}
    .question-options2 tbody tr{padding-left: 30px;}
    .question-options2 tbody tr td{height:64px;background: #fff;}
    .question-tr{width: 100%;}
    .question-tr th:nth-of-type(1){padding-left: 30px;}
    .question-tr td:nth-of-type(1){padding-left: 30px;}


    .question-progress-line{padding: 20px 0px;}
    .question-progress-line .el-progress{width: 80%;display: inline-block;}

    .show-txt{color:$mco;cursor: pointer;}

    .exam-checkbox{display: inline-block; position: relative; border: 1px solid #dcdfe6; border-radius: 2px; box-sizing: border-box; width: 14px; height: 14px; background-color: #fff; z-index: 1; vertical-align: -2px; cursor: pointer;}
    .exam-checkbox.checked{background-color: #409eff; border-color: #409eff;}
    .exam-checkbox.checked:after{content: ''; width: 3px; height: 7px; border: #fff solid; border-width: 0 1px 1px 0; position: absolute; left: 4px; top: 1px; z-index: 2;
        -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center;}

    .grey-check{background-color: #f5f7fa;border-color: #dfe4ed;cursor: not-allowed;}
    .single-answer{color: #666;}
</style>

<template>
    <section>
        <div class="breadcrumb-box clearfix">
            <el-breadcrumb separator=" > ">
                <el-breadcrumb-item >培训</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path: '/training/training-manage'}">培训管理</el-breadcrumb-item>
                <el-breadcrumb-item>问卷详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="head-tab-box">
            <span :class="{'head-tab-checked':headTabID==1}" @click="headTabID=1">汇总统计</span>
            <span :class="{'head-tab-checked':headTabID==2}" @click="headTabID=2">单人统计</span>
        </div>
        <div v-show="headTabID==1" class="main-content">
            <div class="paper-box">
                <div class="paper-title">{{QNRform.ExamTitle}}</div>
                <template v-for="item,index in QNRform.List">
                    <div class="question-title">Q{{index+1}}【{{item.QuestionType==1?'单选题':item.QuestionType==2?'多选题':'主观题'}}】{{item.QuestionTitle}}</div>
                    <ul v-if="item.QuestionType!=3">
                        <template v-for="res,index1 in item.Answers">
                            <li>
                                <div class="question-item clearfix"><span>{{answerArr[index1]}}</span><p class="res-box">{{res.AnswerValue}}</p></div>
                                <div class="per-box clearfix">
                                    <div>
                                        <el-progress :percentage="parseInt(res.SelectRateString)"></el-progress>
                                    </div>
                                    <span>({{res.SelectNum}})</span>
                                </div>
                            </li>
                        </template>
                    </ul>
                    <ul v-if="item.QuestionType==3" class="q3-box">
                        <li class="q3-head">
                            <span class="q3-name">学员名称</span>
                            <span class="q3-answer">回答</span>
                        </li>
                        <template v-for="res in item.MemberAnswers">   <!--有答案的时候显示-->
                            <li class="q3-body clearfix">
                                <span v-if="res.Aliasname.length > 0">{{res.Aliasname}}</span>
                                <span v-if="!res.Aliasname.length">{{res.Username}}</span>
                                <p>{{res.SubmitAnswer}}</p>
                            </li>
                        </template>
                    </ul>
                </template>
            </div>
        </div>

        <div v-show="headTabID==2" class="paper-info-main" >
            <div class="info-head clearfix">
                <div class="paper-title">{{QNRform.ExamTitle}}</div>
                <!--<span class="student-input-box"><el-input placeholder="搜索学员" prefix-icon="el-icon-search" v-model="searchName" @change="memberChange"></el-input></span>-->
            </div>
            <div class="info-main-content">
                <el-row class="info-main-title">
                    <el-col :span="6"><div class="car-title">序号</div></el-col>
                    <el-col :span="6"><div class="car-title">学员名字</div></el-col>
                    <el-col :span="6"><div class="car-title">提交时间</div></el-col>
                    <el-col :span="6"><div class="car-title">详情</div></el-col>
                </el-row>
                <template v-if="memberList.length == 0">
                    <p class="pt20 pb20" style="color:#c2c5d5;" >暂无数据</p >
                </template>
                <template v-for="one,index in memberList">
                    <el-row class="info-main">
                        <el-col :span="6">
                            {{index+1}}
                        </el-col>
                        <el-col :span="6">
                            {{one.Username}}
                        </el-col>
                        <el-col :span="6">
                            {{one.ExamStatus==0?'-':one.SubmitTime}}
                        </el-col>
                        <el-col :span="6">
                            <span v-show="one.ExamStatus!=0" class="show-txt" @click="showOneResult(one)">查看</span>
                            <span v-show="one.ExamStatus==0">-</span>
                        </el-col>
                    </el-row>
                </template>
            </div>
        </div>

        <!--详情查看-->
        <el-dialog
                title="问卷详情"
                :visible.sync="showPaperDetail"
                width="50%"
                center>
            <div class="p-relative detail-stu-title">
                <span class="p-absolute exam-space-linet">学员个人信息</span>
                <div class="exam-space-line"></div>
            </div>
            <section class="detail-stu-info fs-14">
                <template v-if="form.Aliasname">
                    <span class="mt20">姓名：{{form.Aliasname}}</span>
                </template>
                <template v-if="!form.Aliasname">
                    <template v-if="form.Username">
                        <span class="mt20">姓名：{{form.Username}}</span>
                    </template>
                </template>
                <span class="mt20">工号：{{form.EmployeeNo}}</span>
                <span class="mt20">公司：{{form.CompanyName}}</span>
                <span class="mt20">手机：{{form.Mobile}}</span>
            </section>

            <section class="mt30">
                <div class="p-relative detail-stu-title">
                    <span class="p-absolute exam-space-linet">调研情况</span>
                    <div class="exam-space-line"></div>
                </div>
                <ul>
                    <li class="p-relative mt exam-question " v-for="outer,index in form.Questions">
                        <template  v-if="outer.QuestionType!=3">
                            <div class="question-content mt20">
                                <p class="question-topic">
                                    <span>{{index+1}}</span>
                                    <span v-if="outer.QuestionType==1">【多选题】</span>
                                    <span v-if="outer.QuestionType==2">【单选题】</span>
                                    <span>{{outer.QuestionTitle}}</span>
                                    <!--<span class="ml20" v-if="outer.IsNeed == 1">【必答】</span>-->
                                    <template v-if="outer.QuestionType == 1 " class="mt20 limit-input">
                                        <template v-if="outer.LimitAnswerNum > 0">
                                            <span class="limit-num ml20" >最多可选</span>
                                            <el-input v-model="outer.LimitAnswerNum" disabled></el-input>
                                            <span class="limit-num">项</span>
                                        </template>
                                    </template>
                                </p>
                                <!-- 选项 -->
                                <div class="examo-one clearfix">

                                        <!--<el-radio v-model.number="outer.MemberAnswerIndexs" :label="iIndex" v-if="outer.QuestionType==2" disabled="true">{{answerArr[iIndex]}}</el-radio>-->
                                        <template v-if="outer.QuestionType==2">
                                            <el-radio-group v-model="outer.MemberAnswerIndexs">
                                                <template v-for="one,iIndex in outer.Answers">
                                                    <div class="examo-f00 mt20">
                                                        <el-radio :label="String(iIndex)" disabled><span class="single-answer">{{answerArr[iIndex]+' '+one.AnswerValue}}</span></el-radio>
                                                    </div>
                                                </template>
                                            </el-radio-group>
                                        </template>
                                        <template v-if="outer.QuestionType==1" v-for="one,iIndex in outer.Answers">
                                            <div class="examo-f00 mt20">
                                                <label disabeld>
                                                    <span class="exam-checkbox grey-check" :class="judgeCheckOn(iIndex, outer.MemberAnswerIndexs)?'checked':''"></span>
                                                    <span class="grey-txt">{{answerArr[iIndex]}}</span>
                                                </label>
                                                <span>{{one.AnswerValue}}</span>
                                            </div>
                                        </template>

                                </div>
                                <div class="question-down clearfix mt20">
                                    <span class="fs-14 question-down-left fl fs-14">学员回答∶</span>
                                    <template v-if="outer.QuestionType !=3">
                                        <span class="answer-one fs-14">
                                            <span v-for="item in outer.num">
                                                 {{item | filterAnswer}}
                                            </span>
                                        </span>
                                    </template>

                                </div>
                            </div>

                        </template>
                        <template v-if="outer.QuestionType == 3">
                            <div class="question-content mt20">
                                <p class="question-topic">
                                    <span>{{index+1}}</span>
                                    <span>【问答题】</span>
                                    <span>{{outer.QuestionTitle}}</span>
                                    <!--<span class="ml20" v-if="outer.IsNeed == 1">【必答】</span>-->
                                </p>
                                <div class="question-down clearfix mt20">
                                    <span class="fs-14 question-down-left">学员回答∶</span>
                                    <span class="answer-one fs-14">{{outer.SubmitAnswer}}</span>
                                </div>
                            </div>
                        </template>
                    </li>
                </ul>
            </section>


            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showPaperDetail = false">知道了</el-button>
            </span>
        </el-dialog>

    </section>

</template>

<script>

	import qs from 'qs'
	let answerArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
	Vue.filter('filterAnswer', n=>{
		var arr =['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
		return arr[n];
	});

	export default{
		data: function(){
			return {
				answerArr:answerArr,
				headTabID:1, // 1 汇总统计 2 单人统计
				paperInfo: {
					title:'多麦企业文化培训问卷',
					Questions:[],

				},


				ExamTitle:'',
				memberList:[],
                form:{},/*问卷详情*/

				QNRform:{
				    List:[],
                    ExamTitle:''
                }, /*问卷结果*/

				showPaperDetail:false,
                qqq:'1'

			}
		},
		mixins: [mixinMethods],
		methods: {
//			问卷结果
			getQNRResult(){
				let ExamQNRID = this.$route.query.ExamQNRID;
				axios.post('/com/exam/getQNRResult', qs.stringify({
					examID: ExamQNRID,
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                    	console.log(d);
                    	this.QNRform= d.data;

                    }
                } )
            },
			getMemberList(){
				let ExamQNRID = this.$route.query.ExamQNRID;
				axios.post('/com/exam/getQNREmployeeList', qs.stringify({ /*问卷结果列表*/
					examID:ExamQNRID
				})).then((res) => {
					var d = res.data;
					if(d.flag == 1){
						this.memberList = d.data.Rows;
					}else {
						this.$message.error(d.msg)
					}
				})
			},
			memberChange(){
				this.getMemberList();
            },
			showOneResult(one){ /*查看学员的问卷考试详情*/
				this.showPaperDetail = true;


				let ExamQNRID = this.$route.query.ExamQNRID;
				axios.post('/com/exam/getMemberQNRExamResult', qs.stringify({  //用户问卷详情
					examID:ExamQNRID,
					employeeID: one.EmployeeID,
				})).then( (res) => {
					var d = res.data;
					if(d.flag == 1){
                        d.data.Questions.forEach((one)=>{
                            if(one.MemberAnswerIndexs!=''){
                                one.num = one.MemberAnswerIndexs.split(',');
                            }
                        });
                        this.form = d.data;
					}else{
						this.$message.error(d.msg);
					}
				} );
			},

			judgeCheckOn(index, arr){      // 判断选项多选是否选中
				if(arr.indexOf(index) > -1){
					return true;
				}
				return false;
			},


		},
		mounted: function(){
			this.getQNRResult();

            this.getMemberList();
		}
	}


</script>